<template>
    <view class="content">
		<view class="nav">
			<view @click="show_1 = true">
				{{ line }}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-6"></u-icon>
			</view>
			<view @click="show_2 = true">
				{{ date || '选择日期' }}<u-icon name="arrow-down" color="#919191" size="28" class="u-m-l-6"></u-icon>
			</view>
		</view>
		
        <view class="box" v-for="(item,index) in list" :key="index" @click="toDetails(item)">
			<view class="item" v-if="item.type != 0">
				<image src="../../static/icon/yun.png" class="icon"></image>
				<view class="name">云课堂</view>
			</view>
			<view class="item">
				<view class="left">服务类型</view>
				<view class="right">{{item.category_name}}</view>
			</view>
			<view class="item">
				<view class="left">省市</view>
				<view class="right">{{item.province_name}}/{{item.city_name}}</view>
			</view>
			<view class="item">
				<view class="left">培训日期</view>
				<view class="right">{{item.train_date}}</view>
			</view>
			<view class="item">
				<view class="left">服务时间</view>
				<view class="right">{{item.train_time}}</view>
			</view>
			<view class="item" v-if="item.outsides">
				<view class="left">外勤</view>
				<view class="right">{{item.outsides}}</view>
			</view>
			
			<view class="btns" v-if="(role == 1 || role == 3) && (type == 0 || type == 1 || type == 2)">
				<view class="btn1" v-if="type == 0" @click.stop="submit(item)">提交申请</view>
				<view class="btn2" v-if="type == 1" @click.stop="doDelayed(item)">延迟</view>
				<view class="btn1" v-if="role == 1 && type == 1" @click.stop="share(item)">分配</view>
				<view class="btn1" v-if="type == 2" @click.stop="finish(item)">完成回访</view>
			</view>
			
			<view class="btns" v-if="role == 4">
				<view class="btn1" v-if="type == 4" @click.stop="finishWork(item)">完成上课</view>
				<view class="btn2" @click.stop="seeQR(item)">查看上课码</view>
			</view>
		</view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
		
		<view class="footer" v-if="(role == 1 || role == 3) && type == 0" @click="$gTo(`./create`)">创建培训</view>
		
		<!-- 外勤列表 -->
		<u-popup mode="bottom" v-model="show" border-radius="30">
			<view class="pop-up">
				<scroll-view scroll-y style="height: 900rpx;">
					<view>
						<view class="box u-flex u-col-bottom" v-for="(item,index) in outside" :key="index">
							<view class="u-flex-1">
								<view class="item">
									<view class="left">姓名</view>
									<view class="right">{{item.nickname}}</view>
								</view>
								<view class="item">
									<view class="left">账号</view>
									<view class="right">{{item.username}}</view>
								</view>
								<view class="item">
									<view class="left">角色</view>
									<view class="right">{{item.role_name}}</view>
								</view>
							</view>
							
							<view class="btns">
								<view class="btn2" @click="choose(item)">选择</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		
		<!-- 上课二维码 -->
		<u-mask :show="showQr" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <view class="pop-up2">
		                <image :src="item.qrcode_uri"></image>
		            </view>
		            <image src="/static/icon/close.png" class="pop-del" @click="showQr = false"></image>
		        </view>
		    </view>
		</u-mask>
		
		<u-select v-model="show_1" mode="single-column" :list="lineList" @confirm="confirmLine"></u-select>
			
		<u-picker v-model="show_2" mode="time" @confirm="confirmDate"></u-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				role: 1,//1超级管理员 2人力资源 3内勤 4外勤 5运营客服
				show: false,
				showQr: false,
				show_1: false,
				show_2: false,
                type: '',
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
				item: {},
				outside: [],//外勤
				date: '',
				lineList: [{label: '全部',value: '-1'},{label: '线下',value: '0'},{label: '线上',value: '1'}],
				line: '全部',
				lineId: '-1',
            };
        },
        onLoad(option) {
            if (option.type) {
				this.type = option.type
			}
			if (option.type == 1) {
				this.getSelect()
			}
        },
		onShow() {
			this.list = []
			this.page = 1
			this.status = 'loadmore'
			this.getList()
			
			if (this.$getSync('roleId')) {
				this.role = this.$getSync('roleId')
				console.log('this.role', this.role)
			}
		},
		onReachBottom() {
			if(this.page == 1){return}
			this.getList()
		},
        methods: {
			doSearch() {
				this.list = []
				this.page = 1
				this.status = 'loadmore'
				this.getList()
			},
			
			// 选择日期
			confirmDate(e) {
				console.log(e)
				this.date = e.year + '-' + e.month + '-' + e.day
				this.doSearch()
			},
			
			// 选择线上线下
			confirmLine(e) {
				console.log(e)
				this.line = e[0].label
				this.lineId = e[0].value
				this.doSearch()
			},
			
			toDetails(item) {
				this.$gTo(`./create?id=${item.id}&type=${this.type}&role=${this.role}`)
			},
			
			seeQR(item) {
				this.item = item
				this.showQr = true
			},
			
			// 分配
			share(item) {
				this.item = item
				this.show = true
			},
			
			// 选择 外勤
			choose(item) {
				this.show = false
				uni.showModal({
					title: '提示',
					content: `确认选择${item.nickname}吗？`,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#00b5bc',
					success: (res) => {
						if (res.confirm) {
							this.$ajax('staff_add_outside', {
							    userToken: this.$getSync('userToken'),
							    train_id: this.item.id,
								outside_id: item.id,
							}).then(ret => {
								if (ret.status == 0) {
							        this.$toast('提交成功')
									setTimeout(() => {
										this.item = {}
										this.doSearch()
									}, 500)
								} else {
									this.$toast(ret.message);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
							
						}
					}
				});
			},
			
			// 延时
			doDelayed(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认延时？',
					cancelText: '取消',
					confirmText: '确认延时',
					confirmColor: '#00b5bc',
					success: (res) => {
						if (res.confirm) {
							this.$ajax('staff_raise_train', {
							    userToken: this.$getSync('userToken'),
							    train_id: item.id,
							}).then(ret => {
								if (ret.status == 0) {
							        this.$toast('提交成功')
									setTimeout(() => {
										this.doSearch()
									}, 500)
								} else {
									this.$toast(ret.message);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 完成上课
			finishWork(item) {
				uni.showModal({
					title: '提示',
					content: '确认完成上课？',
					cancelText: '取消',
					confirmText: '确认完成',
					confirmColor: '#00b5bc',
					success: (res) => {
						if (res.confirm) {
							this.$ajax('staff_finish_train', {
							    userToken: this.$getSync('userToken'),
							    train_id: item.id,
							}).then(ret => {
								if (ret.status == 0) {
							        this.$toast('提交成功')
									setTimeout(() => {
										this.doSearch()
									}, 500)
								} else {
									this.$toast(ret.message);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 完成回访
			finish(item) {
				uni.showModal({
					title: '提示',
					content: '确认完成回访？',
					cancelText: '取消',
					confirmText: '确认完成',
					confirmColor: '#00b5bc',
					success: (res) => {
						if (res.confirm) {
							this.$ajax('staff_follow_train', {
							    userToken: this.$getSync('userToken'),
							    train_id: item.id,
							}).then(ret => {
								if (ret.status == 0) {
							        this.$toast('提交成功')
									setTimeout(() => {
										this.doSearch()
									}, 500)
								} else {
									this.$toast(ret.message);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 提交申请
			submit(item) {
				this.$ajax('staff_submit_application', {
				    userToken: this.$getSync('userToken'),
				    train_id: item.id,
				}).then(ret => {
					if (ret.status == 0) {
				        this.$toast('提交成功')
						setTimeout(() => {
							this.doSearch()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			getList() {
				if (this.status == 'nomore') return;
				this.status = 'loading';
				this.$ajax('staff_trains', {
			        userToken: this.$getSync('userToken'),
			        page: this.page,
			        limit: 10,
			        tabIndex: this.type,//0-'培训申请',1'待分配',2 '待回访',3'延迟课单' 4-未完成 5-已完成
					type: this.lineId,//0-线下 1-线上 -1 全部
					pdate: this.date,
			    }).then(ret => {
					if (ret.status == 0) {
			            if (ret.data.length > 0) {
			            	this.list = this.list.concat(ret.data);
			            	this.page++;
			            	this.status = 'loadmore'
			            } else {
			            	this.status = 'nomore'
			            }
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			// 获取下拉选项
			getSelect() {
				this.$ajax('staff_get_industry', {
			        userToken: this.$getSync('userToken'),
			    }).then(ret => {
					if (ret.status == 0) {
						this.outside = ret.data.outside
						if (this.outside && this.outside.length > 0) {
							this.outside.forEach(cur => {
								this.$set(cur,'isSelect',false)
							})
						}
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 20rpx 20rpx 120rpx;
	}
	.nav{
		padding: 25rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.box{
		padding: 36rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
	}
	.item:last-child{
		padding-bottom: 0;
	}
	.name{
		flex: 1;
		font-size: 34rpx;
		color: #00b7bd;
	}
	.icon{
		width: 46rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}
	.left{
		width: 130rpx;
		color: #8e8e8e;
	}
	.right{
		flex: 1;
		white-space: pre-line;
		word-break: break-all;
	}
	
	.btns{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-top: 10rpx;
	}
	.btns>view{
		padding: 14rpx 50rpx;
		border-radius: 50rpx;
		box-sizing: border-box;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	.btn1{
		color: #fff;
		background-color: #00b7bd;
	}
	.btn2{
		color: #00b7bd;
		background-color: #fff;
		border: 2rpx solid #00b7bd;
	}
	
	.footer{
		width: 750rpx;
		height: 90rpx;
		background-color: #01b6bd;
		font-size: 34rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.pop-up{
		padding: 30rpx;
		background-color: #f5f5f5;
	}
	
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box3 {
	    width: 616rpx;
	    background: #fff;
	    border-radius: 30rpx;
		position: relative;
	}
	.pop-up2{
		width: 616rpx;
		// height: 670rpx;
		padding: 50rpx 40rpx;
	}
	.pop-up2>image{
		width: 530rpx;
		height: 530rpx;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}
	
	

</style>
